<script setup lang="ts">
import axios from 'axios'
import { onMounted, ref } from 'vue'
import type { ChannelItem, ChannelResData } from '../types/data'
// 创建响应式数据
const channels = ref<ChannelItem[]>([])
onMounted(async () => {
  const res = await axios.get<ChannelResData>(
    'http://geek.itheima.net/v1_0/channels',
  )
  // 给响应式数据赋值
  channels.value = res.data.data.channels
})
// 2.完成切换效果
defineProps<{ channelId: number }>()

const emit = defineEmits<{
  (e: 'changeChannel', id: number): void
}>()
</script>

<template>
  <div class="channel-nav">
    <nav class="list">
      <a
        class="item"
        :class="{ active: channelId === item.id }"
        href="javascript:;"
        v-for="item in channels"
        :key="item.id"
        @click="emit('changeChannel', item.id)"
      >
        {{ item.name }}
      </a>
    </nav>
  </div>
</template>
